<template>
  <view class="detail-base-info">
    <view class="header-bar">
      <view class="status-bar" />
	  <!-- gysOrderState为3是供应商报价中，用供应商状态控制按钮，而不是报价轮次状态，因为供应商可能放弃参与报价 -->
      <wk-nav-bar
        :command-list="commandList"
		@command="handleCommand"
		:useCommand="gysOrderState == 3 && status == 1"
        title="询价明细"
        theme="white"
        class="nav-bar" />
    </view>
    <scroll-view :scroll-y="true" direction="vertical" :style="{height: pageHeight+'px'}">
      <section class="section about-operation">
        <view v-for="(item, index1) in baseInfos" class="section-body">
          <uni-collapse ref="collapse" v-model="valueTotal[index1]" @change="change">
            <uni-collapse-item :title="'物料名称: '+ item.basicProductName">
              <view class="section-body">
                <template v-for="item1 in item.baseInfo">
                  <base-info-item
                    :key="item1.fieldId"
                    :field="item1"
                    :detail-data="detailData" />
                </template>
                <view v-for="(item2, index2) in item.gysInfoList">
                  <template v-for="finish in item2.finish" v-if="status == 2 || status == 3">
                    <base-info-item
                      :key="finish.fieldId"
                      :field="finish"
                      :detail-data="detailData" />
                  </template>
                  <view class="section-title">
                    <text class="icon" />
                    <text class="text" style="color: #0045C4;">
                      {{ item2.gysName + '报价内容' }}
                    </text>
                  </view>
                  <!-- <uni-collapse-item :title="item2.gysName"> -->
                  <view class="section-body">
                    <!-- <base-info-item
							  fieldType="inputTable"
							  :key="1"
							  :field="item2.gysInfo"
							  :detail-data="detailData" /> -->
							  
						
                    <template>
                      <uni-forms ref="form" :model="formData[index1]" :rules="rules">
						  <template v-for="gysInfo in item2.gysInfo">
                        <uni-forms-item :name="gysInfo.prop" :required="gysInfo.formType != 'file'" label-width="0">
                          <view class="info-item-label">
                            {{ gysInfo.name }} 
                          </view>
						  <uni-data-checkbox v-if="gysInfo.formType == 'radio'" :disabled="disabled" v-model="formData[index1][gysInfo.prop]" :localdata="isFqList"></uni-data-checkbox>
                          <uni-easyinput required v-else-if="gysInfo.formType != 'file'" :disabled="disabled" v-model="formData[index1][gysInfo.prop]" :type="gysInfo.inputType == undefined ? 'text' : gysInfo.inputType" :placeholder="'请输入' + gysInfo.name" />
						  <view v-else>
							  <view class="info-item-value">{{ formData[index1][gysInfo.prop] }}</view>
							  <uni-file-picker
							    v-if="disabled == false"
								v-model="gysFiles[index1]"
								:forIndex="index1"
								:auto-upload="false"
								fileMediatype="all" 
								file-extname="dot,doc,xls,xlsx,docx,pdf"
								mode="grid" 
								:limit="1"
								@select="uploadAfterSelect" 
								@success="success" 
								@fail="fail" 
							  />
						  </view>
                        </uni-forms-item>
						
						</template>
						
                      
                      <view class="section-title" @click="changeShowMore">
                        <text class="title" style="color: #0045C4;">
                          更多
                        </text>
                      </view>
                      <template v-for="ext in item2.ext" v-if="showMore">
                        <uni-forms-item :name="ext.prop" label-width="0">
                          <view class="info-item-label">
                            {{ ext.name }} 
                          </view>
                          <uni-easyinput :disabled="disabled" v-model="formData[index1][ext.prop]" :type="ext.inputType == undefined ? 'text' : ext.inputType" :placeholder="'请输入' + ext.name" />
                          
                        </uni-forms-item>
                      </template>
					  </uni-forms>
                    </template>
                  </view>
                  <!--view> </uni-collapse-item> -->
                </view>
              </view>
            </uni-collapse-item>
            <view />
          </uni-collapse>
        </view>
      </section>
    </scroll-view>
  </view>

</template>

<script>
  import BaseInfoItem from './baseInfoItem'
  import {getSrmXjOrderLcDetail, updateList, submitOrder, deleteFile} from 'API/inqueryMessage'
  import state from '@/mixins/state.js'
  import { deepCopy } from '@/utils/lib.js'
  import { commonUploadOneAfterSelect } from '@/utils/file.js'
  import { BASE_URL_FN } from '@/config.js'

  export default {
    name: 'QuotaRoundDetail',
    components: {
      BaseInfoItem
    },
    mixins: [state],
    props: {
      detailId: {
        type: [String, Number],
        required: false
      },
      detailData: {
        type: Object,
        default: () => {}
      },
    },
    onLoad(e) {
      this.id = e.id
      this.status = e.status
	  this.gysOrderState = e.gysOrderState
	  this.objId = e.objId
	  this.srmXjOrderById = e.srmXjOrderById
    },
    data() {
      return {
		  gysOrderState:undefined,
		isFqList:[{
			text: '是',
			value: '是'
		}, {
			text: '否',
			value: '否'
		}],
		gysFiles:[],
		disabled:true,
		srmXjOrderById: undefined,
		objId: undefined,
		originFormData:[],
        formData: [],
        // 自定义表单校验规则
        rules: {
          // name: {
          // 	rules: [{
          // 		required: true,
          // 		errorMessage: '姓名不能为空'
          // 	}]
          // },
          // age: {
          // 	rules: [{
          // 		required: true,
          // 		errorMessage: '年龄不能为空'
          // 	}]
          // },
          // hobby: {
          // 	rules: [{
          // 			format: 'array'
          // 		},
          // 		{
          // 			validateFunction: function(rule, value, data, callback) {
          // 				if (value.length < 2) {
          // 					callback('请至少勾选两个兴趣爱好')
          // 				}
          // 				return true
          // 			}
          // 		}
          // 	]
          // }

        },
        commandList: [
          {
            label: '编辑',
            imgIcon: 'update',
			hidden: false,
            noCheck: true,
            value: 'edit'
          },
		  {
		    label: '取消编辑',
		    imgIcon: 'update',
			hidden: true,
		    noCheck: true,
		    value: 'cancelEdit'
		  },
		  {
		    label: '保存',
		    imgIcon: 'update',
			hidden: true,
		    noCheck: true,
		    value: 'update'
		  },
		  {
		    label: '提交',
		    imgIcon: 'update',
		  			hidden: false,
		    noCheck: true,
		    value: 'submit'
		  },
        ],
        showMore: false,
        status: 0,
        pageHeight: 0,
        headerBarHeight: 0,
        id: undefined,
        valueTotal: [],
        valueMore: [],
        baseInfos: [
        ],
        commandValue: '',
        showBaseInfo: true,
		file: null,
		uploadStatus: ''
      }
    },
    wkActivated() {
      this.showBaseInfo = false
      this.$nextTick(function() {
        this.showBaseInfo = true
      })
    },
    mounted() {
      this.getFieldList()
      // 设置message list页面高度
      this.$nextTick(() => {
        let infos = uni
          .createSelectorQuery()
          .in(this)
          .select('.header-bar');
        infos
          .boundingClientRect(data => {
            this.headerBarHeight = data.height;
            let sysInfo = uni.getSystemInfoSync();
            // padding20px
            this.pageHeight = sysInfo.windowHeight - data.height - 20;
          })
          .exec();
      });
      // 监听窗口大小的变化
      uni.onWindowResize((res) => {
        console.log('ressss', res)
        this.pageHeight = res.size.windowHeight;
      });
    },
    methods: {
		deletePreFile(filePath){
			deleteFile(filePath).then(res => {
				console.log("delete File res",res)
			})
		},
		uploadAfterSelect(res){
			let success = (uploadResult) => {
				if(uploadResult.data != undefined){
					let uploadResultData = JSON.parse(uploadResult.data)
					this.formData[res.forIndex].gysSrc = uploadResultData.data.url
					this.$toast(uploadResultData.msg)
				}
			}
			let err = (err) => {
				console.log(err)
			}
			commonUploadOneAfterSelect(res,success,err,this.formData[res.forIndex].gysSrc)
		},
      handleCommand(command) {
        this.commandValue = command.value
        switch (command.value) {
        case 'submit':
          //TODO
		  this.handleSubmit()
          break
		case 'edit':
		  this.handleEdit()
		  break
		case 'cancelEdit':
		  this.handleCancelEdit()
		  break
		case 'update':
			this.handleUpdate()
			break
		}
      },
	  handleSubmit(){
		  let params = {
			  id: this.srmXjOrderById,
			  srmXjOrderId: this.objId
		  }
		submitOrder(params).then(res => {
			this.$toast(res.msg)
		}) 
	  },
	  handleUpdate(){
		  updateList(this.formData).then(res => {
			  this.$toast(res.data)
		  })
	  },
	  handleEdit(){
		  this.originFormData = deepCopy(this.formData)
		  this.disabled = false
		  let item = this.commandList.find(item => item.value == 'edit');
		  item.hidden = true
		  item = this.commandList.find(item => item.value == 'cancelEdit');
		  item.hidden = false
		  item = this.commandList.find(item => item.value == 'update');
		  item.hidden = false
	  },
	  handleCancelEdit(){
		  this.formData = this.originFormData
		  this.disabled = true
		  let item = this.commandList.find(item => item.value == 'edit');
		  item.hidden = false
		  item = this.commandList.find(item => item.value == 'cancelEdit');
		  item.hidden = true
		  item = this.commandList.find(item => item.value == 'update');
		  item.hidden = true
	  },
      changeShowMore() {
        this.showMore = !this.showMore
      },
      onClick(e) {
        uni.showToast({
          title: '列表被点击'
        })
      },
      change(e) {
        console.log(e);
      },
      /**
       * 获取自定义字段信息
       */
      getFieldList() {
        getSrmXjOrderLcDetail({
          id: this.id
        }).then(res => {
          console.log('roundDetailRes', res)
          if (res.data != undefined && res.data instanceof Array) {
            res.data.forEach((item, index) => {
			  let itemDetailId = item.srmXjOrderDetail.id
              let info = {
                basicProductName: item.basicProductName,
                baseInfo: [
                  { name: '物料编码', value: item.basicProductCode, formType: 'info' },
                  // { name: '物料名称', value: item.basicProductName, formType: 'info' },
                  { name: '规格', value: item.basicProductSspace, formType: 'info' },
                  { name: '型号', value: item.basicProductModel, formType: 'info' },
                  { name: '图号', value: item.paramPz, formType: 'info' },
                  { name: '计量单位', value: item.unit, formType: 'info' },
                  { name: '询价数量', value: item.num, formType: 'info' },
                  { name: '需求日期', value: item.xqDate, formType: 'info' },
                  { name: '行备注', value: item.bcExplain, formType: 'info' },
                  { name: '附件', value: item.src, formType: 'file' },
                ],
                gysInfoList: []
              }
              if (item.gysInfoList != undefined && item.gysInfoList instanceof Array) {
                item.gysInfoList.forEach((e, index) => {
                  let gysInfo = {
                    gysName: e.gysBasicInfo.name,
                    gysInfo: [
                      // { name: '供应商', value: item.gysInfoList[0].gysBasicInfo.name, formType: 'info' }, 
                      { name: '报价数量', value: e.srmXjOrderDetailUser.num, formType: 'info', prop: 'num', inputType:'number' },
					  { name: '含税单价', value: e.srmXjOrderDetailUser.price, formType: 'info', prop: 'price', inputType:'digit' },
					  { name: '含税金额', value: e.srmXjOrderDetailUser.amount, formType: 'info', prop: 'amount', inputType:'digit' },
					  { name: '税率', value: e.srmXjOrderDetailUser.taxRate, formType: 'info', prop: 'taxRate', inputType:'digit' },
					  { name: '是否放弃', value: e.srmXjOrderDetailUser.isFq, formType: 'radio', prop: 'isFq' },//TODO之后单独做个按钮
					  { name: '制造厂商', value: e.srmXjOrderDetailUser.manufacture, formType: 'info', prop: 'manufacture' },
					  { name: '供货周期(天)', value: e.srmXjOrderDetailUser.ghZq, formType: 'info', prop: 'ghZq' },
					  { name: '付款方式', value: e.srmXjOrderDetailUser.bjExplain, formType: 'info', prop: 'bjExplain' },
					  { name: '供应商附件', value: e.gysSrc, formType: 'file', prop: 'gysSrc' },

                      // srmXjOrderDetailUserStateEnum[e.gysInfoList[0].srmXjOrderDetailUser.status]
                    ],
                    ext: [
                      { name: '报价物料名称', value: e.srmXjOrderDetailUser.bjwlmc, formType: 'info', prop: 'bjwlmc' },
					  { name: '报价规格', value: e.srmXjOrderDetailUser.bjgg, formType: 'info', prop: 'bjgg' },
					  { name: '报价型号', value: e.srmXjOrderDetailUser.bjxh, formType: 'info', prop: 'bjxh' },
					  { name: '报价图号', value: e.srmXjOrderDetailUser.bjth, formType: 'info', prop: 'bjth' },
					  { name: '最小采购量', value: e.srmXjOrderDetailUser.minCgl, formType: 'info', prop: 'minCgl', inputType:'number' },
					  { name: '特殊备注', value: e.srmXjOrderDetailUser.remark, formType: 'info', prop: 'remark' },
					],
                    finish: [
                      { name: '是否中标', value: e.srmXjOrderDetailUser.status, formType: 'info' },
                      { name: '中标数量', value: e.srmXjOrderDetailUser.zbsl, formType: 'info' },
                      { name: '中标价格', value: e.srmXjOrderDetailUser.zbjg, formType: 'info' },
                    ]
                  }
                  info.gysInfoList.push(gysInfo)
				  this.formData.push({
					  id: e.srmXjOrderDetailUser.id,
					  detailId: itemDetailId,
					  num: e.srmXjOrderDetailUser.num,
					  price: e.srmXjOrderDetailUser.price,
					  amount: e.srmXjOrderDetailUser.amount,
					  taxRate: e.srmXjOrderDetailUser.taxRate,
					  isFq: e.srmXjOrderDetailUser.isFq,//TODO
					  manufacture: e.srmXjOrderDetailUser.manufacture,
					  ghZq: e.srmXjOrderDetailUser.ghZq,
					  bjExplain: e.srmXjOrderDetailUser.bjExplain,
					  bjwlmc: e.srmXjOrderDetailUser.bjwlmc,
					  bjgg: e.srmXjOrderDetailUser.bjgg,
					  bjxh: e.srmXjOrderDetailUser.bjxh,
					  bjth: e.srmXjOrderDetailUser.bjth,
					  minCgl: e.srmXjOrderDetailUser.minCgl,
					  remark: e.srmXjOrderDetailUser.remark,
					  clJhDate: e.srmXjOrderDetailUser.clJhDate,
					  effectivePeriod: e.srmXjOrderDetailUser.effectivePeriod,
					  gysSrc: e.srmXjOrderDetailUser.gysSrc
					})
                })
              }
              this.baseInfos.push(info)
			  
              this.valueTotal.push([])
              this.valueMore.push(['0'])
            })
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
@import '../../style/style.scss';
.info-item-label {
    font-size: 26rpx;
    color: $light;
    padding: 15rpx 0;
  }
  .info-item-value {
    width: 100%;
    min-height: 50rpx;
    font-size: 30rpx;
    color: $dark;
	}
	
  .about-operation {
	  margin: 0px 10px 10px 10px;
    background-color: white;

    .section-body {
      padding: 0 30rpx;
      .list {
        margin-top: 36rpx;
        .list-item {
          display: flex;
          .time {
            flex-direction: column;
            @include left;
            .date {
              font-size: 26rpx;
              color: $dark;
            }
            .now {
              font-size: 24rpx;
              color: $gray;
            }
          }

          .icon-box{
            position: relative;
            display: flex;
            .icon {
              z-index: 2;
              width: 20rpx;
              height: 20rpx;
              border-radius: 50%;
              border: 5rpx solid #d5d5d5;
              margin: 14rpx 24rpx 0;
            }
            &::before {
              position: absolute;
              z-index: 1;
              top: 30rpx;
              left: 50%;
              transform: translateX(-50%);
              content: '';
              width: 1rpx;
              height: calc(100% - 16rpx);
              border-left: 1rpx dotted #d8d8d8;
              display: block;
            }
          }

          .content {
            flex: 1;
            padding-bottom: 36rpx;
						overflow: hidden;
            .user-info {
              font-size: 30rpx;
              @include left;
							.avatar {
								width: 70rpx;
								height: 70rpx;
							}
              .username {
                flex: 1;
                margin-left: 15rpx;
              }
              .time {
                font-size: 26rpx;
                color: #999;
              }
            }
            .option {
              font-size: 26rpx;
              color: $gray;
              display: flex;
              flex-wrap: wrap;
              padding-left: 80rpx;
              .option-title {}
              .option-text {
                flex: 1;
								word-break: break-all;
								overflow: hidden;
              }
            }
          }

          &:last-child {
            .icon-box {
              &::before {
                display: none;
              }
            }
          }
        }
      }
    }
  }
</style>
